<template>
	<view class="">
		<view class="" style="width: auto;height: 400upx;padding: 0 30upx;">
			<image style="width: 100%;height: 100%;" src="http://img.61ef.cn/news/201903/20/2019032009251784.jpg" mode="top left"></image>
		</view>
		<view class="">
			<view class="d-header">
				<text>限时抢购</text>
			</view>
			<view class="guess-section">
				<view 
					v-for="(item, index) in topicList" :key="index"
					class="guess-item"
					@click="navToDetailPage(item.id)"
				>
					<view class="image-wrapper">
						<image :src="item.label_thumb" mode="aspectFill"></image>
					</view>
					<text class="title clamp">{{item.label_name}}</text>
					<view class="" style="display: flex;justify-content: space-between;height: 60upx;">
						<view class="" style="display: flex;">
							<image style="width: 50upx;height:50upx;" src="../../static/01.png" mode=""></image>
							<text style="margin-top: 10upx;" class="price">{{item.name}}</text>
						</view>
						<view class="">
							<image style="width: 35upx;height: 35upx;" src="../../static/dianzan.png" mode=""></image>
							<text style="line-height: 50upx;" class="price">{{item.is_recommend}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return{
				res:[],
				user_id:'',
				topicList:[],
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../index/index'
					});
				}
			});
		},
		methods:{
			setAjax(){
				let o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Label/index?p=1',
					method: 'POST',
					data:{
						user_id: this.user_id
					},
					header:{'Content-Type':'form-data'},
					success: (res) => {
						this.topicList = res.data.data.list
						console.log(this.topicList)
						for(var i=0; i<o.topicList.length; i++) {
							o.topicList[i].label_thumb = 'https://cx.mingmeijt.com' + o.topicList[i].label_thumb
						}
					}
				});
				uni.hideLoading()
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			
			navToDetailPage(id) {
				uni.navigateTo({
					url: '/pages/topic/article?article=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.d-header{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: $font-base + 8upx;
		color: $font-color-dark;
		position: relative;
			
		text{
			padding: 0 20upx;
			background: #fff;
			position: relative;
			z-index: 1;
		}
		&:after{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 600upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg - 4upx;
			color: #000000;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg - 4upx;
			color: #000000;
			line-height: 1;
		}
	}
</style>
